<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <style type="text/css">
        .continar {
            position: relative;
            width: 500px;
            height: 500px;
            border: 0px black solid;
            border-radius: 50%;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: rotate linear 60s;
        }

        .continar .item-box {
            width: 100%;
            height: 100%;
            background-color: aqua;
            animation: rotate linear infinite 60s;
        }

        .continar .item {
            position: absolute;
            width: 20px;
            height: 20px;
        }

        @keyframes rotate {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
    <div class="continar">
        <div class="item">
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="item-box"></div>
        </div>
        <div class="item">
            <div class="item-box"></div>
        </div>
    </div>
    <script>
        const item = document.querySelectorAll(".item")
        const r = document.querySelector(".continar").clientWidth / 2
        const count = item.length
        const pieceDeg = 360 / count
        for (let i = 0; i < count; i++) {
            let t = i * pieceDeg
            t = (Math.PI / 180) * t
            const x = Math.sin(t) * r,
                y = -Math.cos(t) * r;
            item[i].style.transform = `translate(${x}px,${y}px)`
        }
    </script>
</body>

</html>